<template>
  <div id="select-version">
    <el-dialog title="您当前为体验账号, 可选择以下版本进行体验" :visible.sync="isDialog" :close-on-click-modal="false" :modal="false" class="isTry_dialog-class" width="620px" center>
      <div class="versions">
        <!-- <div class="versions_item">
          <p class="item_header">
            <span class="shu"></span>
            <span class="item_title">好会计</span>
          </p>
          <ul class="btn_list">
            <li class="btn_item"><el-button plain :loading="loading1" @click="experience(1)">迷你版</el-button></li>
            <li class="btn_item"><el-button plain :loading="loading2" @click="experience(2)">普及版</el-button></li>
            <li class="btn_item"><el-button plain :loading="loading3" @click="experience(3)">普及版PLUS</el-button></li>
          </ul>
        </div> -->
        <div class="versions_item">
          <!-- <p class="item_header">
            <span class="shu"></span>
            <span class="item_title">小微 ERP</span>
          </p> -->
          <ul class="btn_list">
            <!-- <li class="btn_item"><el-button plain :loading="loading4" @click="experience(4)">标准版</el-button></li> -->
            <li class="btn_item">
              <el-button plain :loading="loading5" @click="experience(5)">通用版</el-button>
            </li>
          </ul>
          <span class="Centertext" @click="goPersonalCenter">前往个人中心</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonalCenterUrl } from "@/util/util.js";
import md5 from "js-md5";

export default {
  name: "selectVersion",
  props: {
    isSelectVersion: {
      type: Boolean,
      default: false,
    },
    companynumber: {
      type: String,
    },
  },
  data() {
    return {
      loading5: false,
      loading4: false,
      loading3: false,
      loading2: false,
      loading1: false,
    };
  },
  computed: {
    isDialog: {
      get() {
        return this.isSelectVersion;
      },
      set(newVal) {
        this.$emit("update:isSelectVersion", newVal);
      },
    },
  },
  methods: {
    experience(type) {
      // 体验
      //登录跳转网址
      var openUrl = "http://enterprise.91yikuaiji.com:8756/?userName={userName}&pwdVal={pwdVal}&secretVal={secretVal}&siteUrl={siteUrl}&isTry=true";
      //登录秘钥
      var secretVal = "17ED1809D18215EA23164EBE3E757852AA84A621EFCD5E3133D56FA135FED9C9BF99E3E4E7255A87A6A5F860C705B8FE7EFB1DAD89A0BEC25C4CE10D4B4FA241E4EB10B25EEF19CE58D83BADAC222331";
      //登录网站
      var siteUrl = "enterprise.91yikuaiji.com:8756";

      var userName = "admin";
      //获取登录密码
      var pwdVal = md5("ydz123456");
      let NODE_ENV = process.env.NODE_ENV;
      if (NODE_ENV == 'prod' || NODE_ENV == 'newProd') {
        openUrl = `${NODE_ENV == 'prod' ? "https://zhangsanfeng.vip" : "https://zhangsanfeng.vip"}/?userName={userName}&pwdVal={pwdVal}&secretVal={secretVal}&siteUrl={siteUrl}&isTry=true`;
        secretVal = '17ED1809D18215EA23164EBE3E757852E8419DD41D006E0F6DE2A51F6AB065AE87D388D270585A9C54ABC514B614FF02819194FE15E0DFD9B577FA86502551DB';
        siteUrl = 'zhangsanfeng.vip';
      }
      //组装登录跳转网址
      openUrl = openUrl.replace("{userName}", userName).replace("{pwdVal}", pwdVal).replace("{secretVal}", secretVal).replace("{siteUrl}", siteUrl);
      this.isDialog = false;
      //跳转
      window.open(openUrl);
      // let LoginParams = {
      //   companynumber: 'f0014',
      //   username: 'admin',
      //   pwd: 'ydz123456'
      // };
      // //  正式
      // // 好会计迷你版 F0005 admin 123456
      // // 好会计普及版 F0006 admin 123456
      // // 好会计普及版PLUS F0007 admin 123456
      // // 小微ERP标准版 F0008 admin 123456
      // // 小微ERP专业版 F0003        admin 123456
      // switch (type) {
      //   case 1: // 迷你版
      //     this.loading1 = true;
      //     if (process.env.NODE_ENV == 'prod') {
      //       LoginParams.companynumber = 'F0005';
      //     }
      //     break;
      //   case 2: // 普及版
      //     this.loading2 = true;
      //     if (process.env.NODE_ENV == 'prod') {
      //       LoginParams.companynumber = 'F0006';
      //     }
      //     break;
      //   case 3: // 普及版PLUS
      //     this.loading3 = true;
      //     if (process.env.NODE_ENV == 'prod') {
      //       LoginParams.companynumber = 'F0007';
      //     }
      //     break;
      //   case 4: // 标准版
      //     this.loading4 = true;
      //     if (process.env.NODE_ENV == 'prod') {
      //       LoginParams.companynumber = 'F0008';
      //     }
      //     break;
      //   case 5: // 专业版
      //     this.loading5 = true;
      //     if (process.env.NODE_ENV == 'prod') {
      //       LoginParams.companynumber = 'F0003';
      //     }
      //     break;
      //   default:
      //     break;
      // }
      // this.isDialog = false;
      // this.disembark1(LoginParams);
      // setTimeout(() => {
      //   switch (type) {
      //     case 1: // 迷你版
      //       this.loading1 = false;
      //       break;
      //     case 2: // 普及版
      //       this.loading2 = false;
      //       break;
      //     case 3: // 普及版PLUS
      //       this.loading3 = false;
      //       break;
      //     case 4: // 标准版
      //       this.loading4 = false;
      //       break; // 专业版
      //     case 5:
      //       this.loading5 = false;
      //       break;
      //     default:
      //       break;
      //   }
      // }, 100);
    },
    disembark1(LoginParams) {
      // 登录
      let params = {
        ...LoginParams,
      };
      params.pwd = md5(params.pwd);
      this.$api.publicApi.Login(params).then((res) => {
        if (res.data.status == 200) {
          this.$emit("selectVersionSuccess", res.data.data);
        } else {
          this.$message({ message: res.data.message, type: "warning" });
        }
      });
    },
    goPersonalCenter() {
      window.open(getPersonalCenterUrl(this.companynumber));
    },
  },
};
</script>

<style lang="less" scoped>
#select-version {
  :deep(.isTry_dialog-class) {
    .el-dialog {
      border-radius: 15px;
      top: 8%;
    }
    .el-dialog__header {
      height: 70px;
      line-height: 70px;
      border-top-right-radius: 15px;
      border-top-left-radius: 15px;
      background-color: #fff !important;
      padding: 0 20px;
      .el-dialog__title {
        font-weight: 600;
        font-size: 20px !important;
        color: #588cf8 !important;
        line-height: 70px;
      }
    }
    .el-dialog__body {
      padding: 20px 25px 10px 25px;
    }
    .versions {
      .versions_item {
        margin-bottom: 20px;
        .item_header {
          height: 40px;
          line-height: 40px;
          margin-bottom: 5px;
          .shu {
            display: inline-block;
            width: 2px;
            height: 15px;
            background-color: #558af8;
            margin-right: 5px;
            position: relative;
            top: 2px;
          }
          .item_title {
            color: #333;
            font-size: 16px;
            font-weight: 600;
            margin-left: 5px;
          }
        }
        .btn_list {
          width: 100%;
          .btn_item {
            height: 80px;
            line-height: 80px;
            width: 33%;
            text-align: center;
            display: inline-block;
            .el-button {
              height: 80%;
              width: 80%;
              color: #000;
              font-size: 14px !important;
            }
          }
        }
      }
    }
  }
  .Centertext {
    position: absolute;
    right: 32px;
    cursor: pointer;
    color: #588cf8;
  }
}
</style>
